import React, { useState, useEffect } from 'react'
import "./style.css"
import { Button, ConfigProvider, Flex, Popover } from 'antd';
import { DownOutlined } from '@ant-design/icons';
import Search from '../../components/Search/index'
// 引入图片懒加载组件
import ImgBeLazy from '../../components/imgBeLazy/index'

const Index: React.FC = () => {


  const [arr, setArr] = useState([
    'https://pub-cdn-oss.chuangkit.com/designTemplate/2024/07/05/c5ce465e-630b-4182-a940-34d213d039ca_thumb?v=1721142300000&imageMogr2%2Fthumbnail%2F400x%3E%2Fformat%2Fwebp%2Fsharpen%2F70',
    'https://pub-cdn-oss.chuangkit.com/designTemplate/2024/07/08/b9fc4dfa-d4cd-4c85-bc54-ffa0a219ed52_thumb?v=1720407240000&imageMogr2%2Fthumbnail%2F400x%3E%2Fformat%2Fwebp%2Fsharpen%2F70',
    'https://pub-cdn-oss.chuangkit.com/designTemplate/2024/04/29/c791fe18-8333-4bcb-8ff7-38c0184fc4a2_thumb?v=1726286400000&imageMogr2%2Fthumbnail%2F400x%3E%2Fformat%2Fwebp%2Fsharpen%2F70',
    'https://pub-cdn-oss.chuangkit.com/designTemplate/2024/08/29/e80da115-156b-4caa-a41c-5ccd79b9c4dd_thumb?v=1724922361000&imageMogr2%2Fthumbnail%2F400x%3E%2Fformat%2Fwebp%2Fsharpen%2F70',
    'https://pub-cdn-oss.chuangkit.com/designTemplate/2024/08/29/e6f1a919-fc11-4c5c-a2b1-1d70f56dad16_thumb?v=1724922721000&imageMogr2%2Fthumbnail%2F400x%3E%2Fformat%2Fwebp%2Fsharpen%2F70',
    'https://pub-cdn-oss.chuangkit.com/designTemplate/2024/08/29/f9e2a416-c290-45bc-85b9-9202af9a4152_thumb?v=1724922000000&imageMogr2%2Fthumbnail%2F400x%3E%2Fformat%2Fwebp%2Fsharpen%2F70',
    'https://pub-cdn-oss.chuangkit.com/designTemplate/2024/09/06/4b1e7515-4fe6-493f-ae8c-da9837e3989c_thumb?v=1725609840000&imageMogr2%2Fthumbnail%2F400x%3E%2Fformat%2Fwebp%2Fsharpen%2F70',
    'https://pub-cdn-oss.chuangkit.com/designTemplate/2024/08/30/714e2a68-e1d5-4848-9a3d-767f7d4cd777_thumb?v=1724980200000&imageMogr2%2Fthumbnail%2F400x%3E%2Fformat%2Fwebp%2Fsharpen%2F70',
    'https://pub-cdn-oss.chuangkit.com/designTemplate/2024/09/05/ff94398c-0ce1-4af7-b23a-bb5d1d460921_thumb?v=1725501361000&imageMogr2%2Fthumbnail%2F400x%3E%2Fformat%2Fwebp%2Fsharpen%2F70',
    'https://pub-cdn-oss.chuangkit.com/designTemplate/2024/09/03/e683245e-009d-4381-836d-303387e0fbf0_thumb?v=1725330840000&imageMogr2%2Fthumbnail%2F400x%3E%2Fformat%2Fwebp%2Fsharpen%2F70',
    'https://pub-cdn-oss.chuangkit.com/designTemplate/2024/09/04/bff25076-3e1e-426e-b230-9da8675fa8bc_thumb?v=1725444901000&imageMogr2%2Fthumbnail%2F400x%3E%2Fformat%2Fwebp%2Fsharpen%2F70',
    'https://pub-cdn-oss.chuangkit.com/designTemplate/2024/07/26/3b36a611-5370-4004-95a5-bc5470080a79_thumb?v=1721986680000&imageMogr2%2Fthumbnail%2F400x%3E%2Fformat%2Fwebp%2Fsharpen%2F70',
    'https://pub-cdn-oss.chuangkit.com/designTemplate/2023/07/03/c6bb40ea-4177-4970-95e0-133e5a8f8989_thumb?v=1722931800000&imageMogr2%2Fthumbnail%2F400x%3E%2Fformat%2Fwebp%2Fsharpen%2F70',
    'https://pub-cdn-oss.chuangkit.com/designTemplate/2024/06/28/4f873c3d-924c-455d-b4a2-9318fa4d692f_thumb?v=1719563281000&imageMogr2%2Fthumbnail%2F400x%3E%2Fformat%2Fwebp%2Fsharpen%2F70',
    'https://pub-cdn-oss.chuangkit.com/designTemplate/2024/08/23/5a6f0ac1-72ce-4af6-8270-ddcc02e357c6_thumb?v=1724399521000&imageMogr2%2Fthumbnail%2F400x%3E%2Fformat%2Fwebp%2Fsharpen%2F70',
    'https://pub-cdn-oss.chuangkit.com/designTemplate/2024/08/29/fe98661c-4b30-4604-87c6-5062026d5e01_thumb?v=1724921281000&imageMogr2%2Fthumbnail%2F400x%3E%2Fformat%2Fwebp%2Fsharpen%2F70',
    'https://pub-cdn-oss.chuangkit.com/designTemplate/2024/07/26/08495350-c013-47f1-84f8-3b46d56fe72d_thumb?v=1721985960000&imageMogr2%2Fthumbnail%2F400x%3E%2Fformat%2Fwebp%2Fsharpen%2F70',
    'https://pub-cdn-oss.chuangkit.com/designTemplate/2024/08/30/11f00800-e0fb-4fbd-a667-11c5c9f686cc_thumb?v=1724987521000&imageMogr2%2Fthumbnail%2F400x%3E%2Fformat%2Fwebp%2Fsharpen%2F70',
    'https://pub-cdn-oss.chuangkit.com/designTemplate/2024/08/30/634086cd-230a-40ff-bd10-c40be0083cc6_thumb?v=1724987160000&imageMogr2%2Fthumbnail%2F400x%3E%2Fformat%2Fwebp%2Fsharpen%2F70',
    'https://pub-cdn-oss.chuangkit.com/designTemplate/2024/07/26/a246c966-4db5-4e63-89ca-3a65244b3f20_thumb?v=1721961002000&imageMogr2%2Fthumbnail%2F400x%3E%2Fformat%2Fwebp%2Fsharpen%2F70',
    'https://pub-cdn-oss.chuangkit.com/designTemplate/2024/07/31/3d90440c-3bbf-4437-af0c-387db37d8442_thumb?v=1722561301000&imageMogr2%2Fthumbnail%2F400x%3E%2Fformat%2Fwebp%2Fsharpen%2F70',
    'https://pub-cdn-oss.chuangkit.com/designTemplate/2024/07/23/6b3099f5-e3ba-47a5-8c30-46bb816f5160_thumb?v=1721702700000&imageMogr2%2Fthumbnail%2F400x%3E%2Fformat%2Fwebp%2Fsharpen%2F70',
    'https://pub-cdn-oss.chuangkit.com/designTemplate/2024/07/15/ed8e506d-f6d1-41fd-8ef4-66012d7f3b0c_thumb?v=1721142000000&imageMogr2%2Fthumbnail%2F400x%3E%2Fformat%2Fwebp%2Fsharpen%2F70',
    'https://pub-cdn-oss.chuangkit.com/designTemplate/2024/06/25/93036790-9603-4d22-9904-d6d8de8c431c_thumb?v=1719278100000&imageMogr2%2Fthumbnail%2F400x%3E%2Fformat%2Fwebp%2Fsharpen%2F70',])

  const [num, setNum] = useState(0)

  const tobgcolor = (id: number) => {
    setNum(id)
  }

  // const text = <span>Title</span>;

  const buttonWidth = 80;

  const loadMoreItems = () => {
    // console.log(123);

    setArr((prevItems) => [
      ...prevItems,
      // ...Array.from({ length: 20 }, (_, i) => prevItems.length + i + 1),
      ...arr
    ]);
  };

  const handleScroll = () => {
    console.log(window.innerHeight, 1111);
    console.log(document.documentElement.scrollTop, 222);
    console.log(document.documentElement.offsetHeight, 333);
    if (window.innerHeight + document.documentElement.scrollTop > document.documentElement.offsetHeight) {
      loadMoreItems();
    }

  };

  useEffect(() => {

    window.addEventListener('scroll', handleScroll);
    return () => {
      window.removeEventListener('scroll', handleScroll);

    };
  }, []);

  const content = (
    <div style={{ textAlign: 'center', lineHeight: '30px' }} className='tancu'>
      <p>全部风格</p>
      <p>简约风</p>
      <p>扁平风</p>
      <p>图文风</p>
      <p>合成风</p>
      <p>手绘风</p>
    </div>
  );

  const contenta = (
    <div style={{ textAlign: 'center', lineHeight: '30px' }} className='tancu'>
      <p>横版</p>
      <p>竖版</p>
      <p>方形</p>
    </div>
  );

  const contentb = (
    <div style={{ textAlign: 'center', lineHeight: '30px' }} className='tancu'>
      <p>全部</p>
      <p>动图</p>
      <p>视频</p>
      <p>H5</p>
    </div>
  );

  const searchOption = {
    title: '分类',
    values: ['全部', '海报', '公众号', '抖音/小红薯', '电商', 'PPT/办公', '印刷物料', 'H5', '社交生活', '视频', '插画元素', '视频特效']
  };

  const searchOption2 = {
    title: '场景',
    values: ['推荐', '手机海报', '公众号首图', '小红薯配图', '每日一签', '全屏海报', '邀请函', 'PPT6:9', '简历', '长图海报', '公众号次图', '主图图表', '更多']
  };

  const searchOption3 = {
    title: '用途',
    values: ['全部', '招聘求职', '宣传推广', '传统节气', '市场营销', '人事行政', '教育宣传', '节日节点', '社交生活', '话题咨询']
  };

  const searchOption4 = {
    title: '行业',
    values: ['全部', '通用', '教育培训', '餐饮美食', '金融理财', '地产家居', '精神文明', '科技互联网', '医疗保健', '休闲娱乐', '旅游出行', '文体娱乐', '更多']
  };


  return (
    <div style={{ width: '100%', height: '100%' }}>
      <div className='temTop'>
        <Search option={searchOption}></Search>
        <Search option={searchOption2}></Search>
        <Search option={searchOption3}></Search>
        <Search option={searchOption4}></Search>

      </div>
      <div className='temBottom'>
        <div className="temHeader">
          {/* <Form
        labelCol={{ span: 4 }}
        wrapperCol={{ span: 14 }}
        layout="horizontal"
        // disabled={componentDisabled}
        style={{ maxWidth: 600 }}
      >
        <Form.Item label="Select">
          <Select>
            <Select.Option value="demo">Demo</Select.Option>
          </Select>
        </Form.Item>
      </Form> */}
          <ConfigProvider button={{ style: { width: buttonWidth, margin: 10 } }}>
            <Flex justify="center" align="center" style={{ whiteSpace: 'nowrap' }}>
              <Popover placement="bottom" content={content}>
                颜色：
                <Button>颜色<DownOutlined /></Button>
              </Popover>
              <Popover placement="bottom" content={content}>
                风格：
                <Button>全部<DownOutlined /></Button>
              </Popover>
              <Popover placement="bottom" content={contenta}>
                板式：
                <Button>全部<DownOutlined /></Button>
              </Popover>
              <Popover placement="bottom" content={contentb}>
                类型：
                <Button>全部<DownOutlined /></Button>
              </Popover>
            </Flex>
          </ConfigProvider>
        </div>
        <div className='temfooter'>
          {arr.map((item, index) => (
            <div key={index} style={{ width: '18%', height: '470px', display: 'inline-block', borderRadius: '20px', marginLeft: '20px', marginBottom: '10px' }}>
              {/* <img style={{ width: '100%', height: '450px', marginLeft: '20px' }} src={item} alt="" /> */}
              {/* 图片懒加载组件标签 */}
              <ImgBeLazy style={{ width: '100px', height: '470px', marginLeft: '20px', borderRadius: "20px" }} text={item} />
            </div>
          ))}
        </div>
      </div>
    </div>
  )
}

export default Index